<template>
  <div class="content">
    <div class="w form">
      <el-form :model="form">
        <el-form-item>
          <el-input :disabled="true" placeholder="com.zeng" v-model="form.groupId">
            <template slot="prepend">groupId</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input :disabled="true" placeholder="md-test" v-model="form.artifactId">
            <template slot="prepend">artifactId</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input :disabled="true" placeholder="sys" v-model="form.tablePrefix">
            <template slot="prepend">表前缀</template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input :disabled="true" :value="path">
            <template slot="prepend">创建位置</template>
          </el-input>
        </el-form-item>
        <div style="display: flex">
          <div style="width: 30%">
            <el-form-item label="前端代码生成">
              <el-switch
                v-model="web.create.over"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </div>
          <div style="flex: 1;box-sizing: border-box;padding-top: 11px">
            <el-progress :percentage="web.create.percentage" :format="format"></el-progress>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 30%">
            <el-form-item label="数据库初始化">
              <el-switch
                v-model="database.init.over"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </div>
          <div style="flex: 1;box-sizing: border-box;padding-top: 11px">
            <el-progress :percentage="database.init.percentage" :format="format"></el-progress>
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 30%">
            <el-form-item label="后台代码生成">
              <el-switch
                v-model="serve.create.over"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>

          </div>
          <div style="flex: 1;box-sizing: border-box;padding-top: 11px">
            <el-progress :percentage="serve.create.percentage" :format="format"></el-progress>
          </div>
        </div>

      </el-form>
      <el-form :inline="true">
        <el-form-item>
          <el-button :disabled="web.create.percentage !== 100" type="warning">前端代码删除</el-button>
          <el-button :disabled="serve.create.percentage !== 100" type="danger">后端代码删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div @click="handleCreatedProject" class="button">开始创建</div>

    <el-button type="text" @click="dialogTableVisible = true">cmd窗口</el-button>

    <el-dialog title="cmd"
               width="900px"
               :show-close="true"
               :visible.sync="dialogTableVisible">
      <div id="cmd" style="font-size: 12px;background-color: black;color: #c8ebdf;height: 600px;overflow: auto">
        <p v-for="(item, index) in message" :key="index">{{item}}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      dialogTableVisible: false,
      message: [],
      message_cache: [],
      api: {
        detail: this.$api.item.item,
        status: this.$api.init.status,
        initVue: this.$api.init.initVue,
        initServe: this.$api.init.initServe,
        initDatabase: this.$api.init.initDatabase
      },
      form: {
        tablePrefix: 'zyl',
        artifactId: 'md-test',
        groupId: 'com.zeng'
      },
      path: '',
      web: {
        init: {
          over: true,
          percentage: 0
        },
        create: {
          over: true,
          percentage: 0
        }
      },
      serve: {
        init: {
          over: true,
          percentage: 0
        },
        create: {
          over: true,
          percentage: 0,
          status: ''
        }
      },
      database: {
        init: {
          over: true,
          percentage: 0
        }
      },
      run: false
    }
  },
  methods: {
    format (percentage) {
      return percentage === 100 ? '已完成' : `${percentage}%`
    },
    handleCreatedProject () {
      if (this.web.create.over) {
        this.handleInitVue()
      }
      if (this.serve.create.over) {
        this.handleInitServe()
      }
      if (this.database.init.over) {
        this.handleInitDatabase()
      }
    },
    handleInitVue () {
      this.web.create.percentage = 0
      let interval = setInterval(() => {
        if (this.web.create.percentage < 70) {
          this.web.create.percentage += 3
        }
      }, 600)
      this.$httpf({ url: this.api.initVue, message: 1 }, data => {
        clearInterval(interval)
        this.web.create.percentage = 100
      })
    },
    handleInitDatabase () {
      this.database.init.percentage = 0
      let interval = setInterval(() => {
        if (this.database.init.percentage < 70) {
          this.database.init.percentage += 3
        }
      }, 600)
      this.$httpf({ url: this.api.initDatabase,
        message: 1,
        error: () => {
          clearInterval(interval)
          this.database.init.percentage = 0
        } }, data => {
        clearInterval(interval)
        this.database.init.percentage = 100
      })
    },
    handleInitServe () {
      const webSocket = new WebSocket('ws://localhost:8001/cmd')
      const vm = this
      this.dialogTableVisible = true
      webSocket.onmessage = function (event) {
        vm.message_cache.push(new Date().toLocaleString() + ':' + event.data)
      }
      webSocket.onclose = function (event) {
      }
      webSocket.onopen = () => {
        if (!this.run) {
          this.run = true
          this.serve.create.percentage = 0
          let interval = setInterval(() => {
            if (this.serve.create.percentage < 70) {
              this.serve.create.percentage += 3
            }
          }, 600)
          this.$httpf({ url: this.api.initServe,
            message: 1,
            error: () => {
              this.run = false
              webSocket.close()
              this.serve.create.percentage = 0
              this.$error('服务器错误')
              clearInterval(interval)
            } }, data => {
            this.run = false
            clearInterval(interval)
            this.serve.create.percentage = 100
            webSocket.close()
          })
        }
      }
    },
    openWebSocket () {
    },
    getProjectInfo () {
      this.$httpf({ url: this.api.detail }, data => {
        this.form = data.data.data.detail.info
        let tablePerfix = data.data.data.detail.info.tablePerfix
        if (tablePerfix) {
          this.form['tablePrefix'] = tablePerfix
        }
        this.path = data.data.data.detail.path
      })
    },
    initPercentage () {
      this.$httpf({ url: this.api.status }, data => {
        let status = data.data.data.status
        if (status['web-create']) {
          this.web.create.percentage = 100
          this.web.create.over = false
        }
        if (status['serve-create']) {
          this.serve.create.percentage = 100
          this.serve.create.over = false
        }
        if (status['database-create']) {
          this.database.init.percentage = 100
          this.database.init.over = false
        }
      })
    }
  },
  created () {
    this.getProjectInfo()
    this.initPercentage()
    setInterval(() => {
      let t = this.message_cache.shift()
      if (t) {
        this.message.push(t)
        // 自动滚动
        const cmd = document.querySelector('#cmd')
        if (cmd.offsetHeight < cmd.scrollHeight) {
          cmd.scrollTop += 16
        }
      }
    }, 300)
  }
}
</script>

<style scoped lang="less">
  .content {
    width: 1168px;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;

    .form {
      padding: 15px 0;
      flex: 1 1 100%;
    }

    .button {
      margin: auto;
      width: 190px;
      height: 44px;
      font: 16px/44px Roboto, Avenir, Helvetica, Arial, sans-serif;
      color: white;
      background-color: #42b983;
      text-align: center;
      cursor: pointer;
      box-sizing: border-box;
      margin-bottom: 30px;
    }

    .button:hover {
      background-color: rgba(66, 185, 132, .8);
    }
  }

  .w {
    width: 640px;
    margin: 0 auto;
  }
</style>
